<template>
  <div class="app-container">
    <!--表格渲染-->
    <el-dialog
      :close-on-click-modal="false"
      :before-close="handleClose"
      :visible.sync="hostInfoFlag"
      title="监控主机信息维护"
      width="1400px"
      @open="selClusterInfo()"
    >
      <el-row>
        <el-col :span="6">
          <el-card class="box-card" :body-style="{ padding: '3px' }">
            <el-table
              ref="singleTable"
              highlight-current-row
              style="width: 100%"
              :data="clusterList"
              @current-change="handleCurrentChange"
            >
              <el-table-column type="index" width="50" label="序号" />
              <el-table-column prop="clusterFlag" label="子集群标识" />
              <el-table-column prop="clusterName" label="子集群名称" />
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card class="box-card" :body-style="{ padding: '3px' }">
            <el-radio-group v-model="radio" @change="changeRadio">
              <el-radio
                v-for="item in dict.dict.MONITOR_HOSTINFO_TYPE"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-radio-group>
            <el-form>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="角色" />
                </el-col>
                <el-col :span="6">
                  <el-form-item label="主机名称" />
                </el-col>
                <el-col :span="6">
                  <el-form-item label="主机ip" />
                </el-col>
              </el-row>
              <el-form-item v-for="(item,i) in addForm.hostInfoList" :key="i">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="">
                      <el-input v-model="item.hostJob" clearable placeholder="角色" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="">
                      <el-input v-model="item.hostName" clearable placeholder="主机名称" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="">
                      <el-input v-model="item.hostIp" clearable placeholder="主机ip" />
                    </el-form-item>
                  </el-col>
                  <el-button circle icon="el-icon-plus" @click="addList()" />
                  <el-button v-if="i>0" circle icon="el-icon-minus" @click="subList(i)" />
                </el-row>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveHostInfo">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { form } from '@crud/crud'
import { selHostInfo, selClusterInfo, saveHostInfo } from '@/api/monitor/clusterWh'

const defaultForm = {}
export default {
  mixins: [form(defaultForm)],
  dicts: ['MONITOR_HOSTINFO_TYPE'],
  data() {
    return {
      addForm: {
        centerId: '1',
        url: '',
        cmFlag: '',
        cmName: '',
        hostInfoList: [{ 'hostJob': '', 'hostName': '', 'hostIp': '' }]
      },
      hostInfoFlag: false,
      radio: 'YARN',
      cmFlag: '',
      centerId: '',
      clusterFlag: '',
      type: 'YARN',
      clusterList: []
    }
  },
  methods: {
    addList() {
      this.addForm.hostInfoList.push({ 'hostJob': '', 'hostName': '', 'hostIp': '' })
    }, subList(index) {
      this.addForm.hostInfoList.splice(index, 1)
    }, handleClose() {
      this.hostInfoFlag=false
      this.radio='YARN'
      this.addForm= {
        centerId: '1',
        url: '',
        cmFlag: '',
        cmName: '',
        hostInfoList: [{ 'hostJob': '', 'hostName': '', 'hostIp': '' }]
      }
    }, selClusterInfo() {
      const params = { 'cmFlag': this.cmFlag }
      selClusterInfo(params).then(res => {
        this.clusterList = res
        if(res.length>0){
          const clusterFlag = (res[0]).clusterFlag
          this.setCurrent(res[0])
          this.selHostInfo(clusterFlag)
        }
      }).catch(err => {
        if (err != null) {
          console.log(err.response.data.message)
        } else {
          console.log('请求失败!')
        }
      })
    }, selHostInfo(clusterFlag) {
      const params = {
        'centerId': this.centerId,
        'cmFlag': this.cmFlag,
        'clusterFlag': clusterFlag,
        'type': this.radio
      }
      selHostInfo(params).then(res => {
        if (res != null && res.length > 0) {
          this.addForm.hostInfoList = res
        } else {
          this.addForm.hostInfoList = [{ 'hostJob': '', 'hostName': '', 'hostIp': '' }]
        }
      }).catch(err => {
        if (err != null) {
          console.log(err.response.data.message)
        } else {
          console.log('请求失败!')
        }
      })
    }, saveHostInfo() {
      const reqData = {
        'centerId': this.centerId,
        'cmFlag': this.cmFlag,
        'clusterFlag': this.clusterFlag,
        'type': this.type,
        'hostInfoList': this.addForm.hostInfoList
      }
      saveHostInfo(reqData).then(res => {
        this.$notify.success({
          title: '成功',
          message: '提交成功！',
          duration: 15000
        })
        this.hostInfoFlag = false
      }).catch(err => {
        this.$notify.error({
          title: '失败',
          message: '提交失败！',
          duration: 15000
        })
        if (err != null) {
          console.log(err.response.data.message)
        } else {
          console.log('请求失败!')
        }
      })
    }, setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
    }, handleCurrentChange(val) {
      if(this.clusterList.length>0){
        this.clusterFlag = val.clusterFlag
        this.selHostInfo(this.clusterFlag)
      }
    }, changeRadio(selVal) {
      this.type = selVal
      this.selHostInfo(this.clusterFlag)
    },
  }
}
</script>

<style scoped>

</style>
